<template>
  <div>
    <div class="head">
      <a @click="$router.back(-1)" class="return"></a>
      {{$t('UpdateMb.v1')}}
    </div>
    <div class="overlay" style="padding: 20px 10px 10px;">
      <div class="overlay-content scrolling" align="center">
        <van-cell-group><van-field v-model.trim="Account" maxlength="20" readonly /></van-cell-group>
        <div align="left" style="padding: 15px 0px;color: #ebedf0;font-size: 13px;" v-if="list != '' && list != null">{{$t('UpdateMb.v2')}}</div>
        <van-cell-group style="background: #333952;color: #858dac;" v-if="list != '' && list != null" class="ts">
          <div style="color: white;font-size: 13px;background: #333952;">
            <div v-if="listArr != ''" style="padding-bottom: 10px;border-bottom: 1px solid #2c3145;">
              <van-grid :column-num="3">
                <van-grid-item v-for="(item, index) in list2" :key="Math.random()">
                  <div class="yellow" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
                    <span v-text="item" @click="setActive2(item, index)"></span>
                  </div>
                </van-grid-item>
              </van-grid>
            </div>
            <van-cell-group class="two" style="background: #2C3145;color: #858dac;" v-if="list != '' && list != null">
              <div style="color: white;font-size: 13px;background: #2c3145;padding-bottom: 10px;">
                <van-grid :column-num="3">
                  <van-grid-item v-for="(item, index) in list" :key="Math.random()" v-if="listArr.indexOf(index) == -1">
                    <div :class="{ red: listArr.indexOf(index) != -1 }" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
                      <span v-text="item" @click="setActive(item, index)"></span>
                    </div>
                  </van-grid-item>
                </van-grid>
              </div>
            </van-cell-group>
          </div>
        </van-cell-group>
        <van-cell-group style="border-bottom: 1px solid rgb(44, 49, 69);">
          <van-field :placeholder="$t('UpdateMb.v3')" maxlength="6" type="password" v-model.trim="payPwd" />
        </van-cell-group>
        <van-cell-group><van-field :placeholder="$t('UpdateMb.v4')" maxlength="6" type="password" v-model.trim="payPwd2" /></van-cell-group>
        <div class="btn" style="margin-top:20px;"><x-button type="primary" :show-loading="loading" @click.native="submit">{{$t('UpdateMb.v5')}}</x-button></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
import { mine, base } from './../utils/api';
let _this;
export default {
  data() {
    return {
      Account: '',
      payPwd: '',
      payPwd2: '',
      k: '', //凭证K值
      v: '', //凭证V值
      loading: false,
      list: [],
      list2: [],
      listArray: [],
      listString: '',
      oc: '',
      listArr: [],
      indexType: true
    };
  },
  beforeCreate() {
    _this = this;
  },
  mounted() {
    this.getPer(); // 获取个人信息
  },
  methods: {
    getPer() {
      mine.getPersonal().then(res => {
        this.Account = res.data.userName;
        this.getUserName(); // 查询当前助记词
      });
    },
    getUserName() {
      // 助记词查询
      base
        .getUserNameZJC({
          userName: this.Account
        })
        .then(res => {
          if (res.code == 200) {
            this.list = res.data;
          }
        });
    },
    setActive(item, index) {
      this.oc = index;
      if (this.listArr.includes(index)) {
        this.listArr.splice(this.listArr.indexOf(index), 1);
        this.listArray.splice(this.listArray.indexOf(item), 1);
        this.list2.splice(this.listArray.indexOf(item), 1);
      } else {
        this.listArr.push(index);
        this.listArray.push(item);
        this.list2.push(item);
      }
      this.listString = this.listArray.join(' ');
      if (this.listArray.length == 12) {
        this.indexType = false;
      } else {
        this.indexType = true;
      }
    },
    setActive2() {
      this.list2 = [];
      this.listArr = [];
      this.listArray = [];
      this.listString = '';
    },
    submit() {
      if (!this.payPwd) {
        Toast(this.$t('UpdateMb.v6'));
        return false;
      }
      if (this.payPwd.length != 6) {
        Toast(this.$t('UpdateMb.v7'));
        return false;
      }
      if (!this.payPwd2) {
        Toast(this.$t('UpdateMb.v8'));
        return false;
      }
      if (this.payPwd2.length != 6) {
        Toast(this.$t('UpdateMb.v9'));
        return false;
      }
      if (this.payPwd != this.payPwd2) {
        Toast(this.$t('UpdateMb.v10'));
        return false;
      }
      this.loading = true;
      base.getCredentials().then(res => {
        if (res.code == 8008) {
          this.k = res.data.k;
          this.v = res.data.v;
          mine
            .getzhTradePassWrod({
              auxiliaries: this.listString,
              key: this.k,
              encryptedData: this.rsaEncrypt(this.payPwd + ',' + this.v)
            })
            .then(res => {
              if (res.code == 200) {
                setTimeout(() => {
                  this.loading = false;
                  this.$router.push({
                    path: '/Safety'
                  });
                }, 500);
              } else if (res.code == 500) {
                this.loading = false;
              }
              Toast(res.msg);
            });
        }
      });
    }
  },
  watch: {
    payPwd: function() {
      this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 不能输入中文和字母
    },
    payPwd2: function() {
      this.payPwd2 = this.payPwd2.replace(/[^\d]/g, ''); // 不能输入中文和字母
    }
  }
};
</script>

<style lang="less" scoped>
.head ~ .overlay {
  top: 44px;
}

.van-cell {
  background-color: #333952;
  color: #ffffff;
  font-size: 15px;
  padding: 15px;
}

[class*='van-hairline'] {
  position: unset;
}

/deep/ .weui-btn_primary {
  background: #3fb776 !important;
}

/deep/ .van-button--primary {
  background: #3fb776 !important;
  border: 1px solid #3fb776;
}

.van-hairline--top-bottom::after {
  border: 0;
}

.btn {
  padding: 0 10px 0px;
}

/deep/ .van-field__control {
  color: #ffffff;
}

/deep/ input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: rgba(244, 244, 244, 0.3) !important;
}

/deep/ input::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(244, 244, 244, 0.3) !important;
}

/deep/ input:-ms-input-placeholder {
  /* IE 10+ */
  color: rgba(244, 244, 244, 0.3) !important;
}

/deep/ input:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(244, 244, 244, 0.3) !important;
}

/deep/ .van-cell:not(:last-child)::after {
  border: 0;
}

.text {
  padding: 20px;
  text-align: center;
  font-size: 13px;
}

.red {
  border: 1px solid #3fb776 !important;
  background: #3fb776 !important;
}

.yellow {
  border: 1px solid rgb(93, 107, 151) !important;
  background: rgb(93, 107, 151) !important;
}

/deep/ .van-grid-item__content {
  background: #333952;
  padding: 10px 5px;
}

/deep/ .van-hairline--top::after {
  border: 0;
}

/deep/ .van-grid-item__content::after {
  border: 0;
}

/deep/ .van-grid-item__content {
  float: left;
}

/deep/ .van-grid.van-hairline--top {
  background: #333952;
}
</style>
